<!--
  Generated template for the ReasonsModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="secondary">
    <ion-title><span class="custom-font-size-t">Motivos de parada</span></ion-title>
    <ion-buttons end>
        <button ion-button (click)="closeModal()">
            <span class="custom-font-size-t">Atrás</span>
        </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col text-center width-50>
                <button ion-button full (click)="selectTechnical()" *ngIf="reason_button_selected == 'technical'">
                    Causas técnicas
                </button>
                <button ion-button full (click)="selectTechnical()" *ngIf="reason_button_selected !== 'technical'" color=dark>
                    Causas técnicas
                </button>
            </ion-col>
            <ion-col text-center width-50>
                <button ion-button full (click)="selectOrganizative()" *ngIf="reason_button_selected == 'organizative'">
                    Causas organizativas
                </button>
                <button ion-button full (click)="selectOrganizative()" *ngIf="reason_button_selected !== 'organizative'" color=dark>
                    Causas organizativas
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-list>
        <button ion-item *ngFor="let reason of reasons" (click)="reasonSelected(reason)">
            <span>{{ reason.name }}</span>
        </button>  
    </ion-list>
</ion-content>
